<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 兼容IE各个版本，内置了Chrome插件的用Chrome内核 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 给浏览器指定内核 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="/public/ueditor/ueditor.parse.js"></script>
    <title>I'm A Blog</title>
    <link rel="stylesheet" href="/public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/public/css/normalize.min.css">
    <link rel="stylesheet" href="/public/css/main.css">
    <script type="text/javascript" src="/public/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
    <link rel="stylesheet" type="text/css" href="/public/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
</head>
<body>
<!-- 头部开始 -->
<header>
    <div class="backImg"><img src="/public/images/my.png"></div>
</header>
<!-- 头部结束 -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- 导航条开始 -->
<nav>
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Blog</a>
            <button data-toggle="collapse" data-target="#intel-collapse" class="navbar-toggle" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="intel-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">首页</a></li>
                {% for category in categories %}
                <li><a href="/?category={{ category.id }}">{{ category.name }}</a></li>
                {% endfor%}
            </ul>
        </div>
    </div>
</nav>
<!-- 导航条结束 -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- 主体内容区开始 -->
<main>
    <div class="row">
        <!-- 右侧栏 -->
        <div class="col-sm-3 col-sm-push-9 col-xs-12">
            <div class="row">
                <div class="mainRight ">
                    <!-- 用户信息框 -->
                    {% if userInfo._id %}
                    <div class="rightBox" id="adminBox">
                        <h2>你好</h2>
                        <h3 class="username">{{userInfo.username}}</h3>
                        {% if userInfo.isAdmin %}
                        <p class="userInfo">管理员</p>
                        <p><a href="/admin"><span>进入我的管理中心</span></a></p>
                        {% else %}
                        <p class="userInfo">欢迎来到我的博客</p>
                        {% endif %}
                        <a class="loginOut" href="javascript:;">退出</a>
                    </div>
                    {% else %}
                    <!-- 登录框 -->
                    <div class="rightBox" id="loginBox">
                        <h3>登录</h3>
                        <form action="#" class="form-horizontal">
                            <div class="form-group ">
                                <label class="col-xs-2 control-label" for="username"><span
                                        class="glyphicon glyphicon-user"></span></label>
                                <div class="col-xs-10">
                                    <input class="form-control" placeholder="用户名" type="text" name="username"
                                           id="username">
                                    <!-- <span class="help-block">用户名长度在3-10个单位</span> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 control-label" for="pwd"><span
                                        class="glyphicon glyphicon-lock"></span></label>
                                <div class="col-xs-10">
                                    <input class="form-control" placeholder="密码" type="password" name="pwd" id="pwd">
                                    <!-- <span class="help-block">密码中必须包含数字、字母</span> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="button" class="btn btn-primary btn-block loginBtn" value="登录">
                                <input type="button" class="btn  btn-block myreset" value="重置">
                                <span class="myInfo"></span>
                            </div>
                            <p> 没有账号？ <a href="javascript:;">点击注册</a></p>
                        </form>
                    </div>
                    {% endif %}
                    <!-- 注册框 -->
                    <div class="rightBox" id="registerBox" style="display: none;">
                        <h3>注册</h3>
                        <form method="post" action="/api/user/register" class="form-horizontal">
                            <div class="form-group ">
                                <label class="col-xs-2 control-label" for="username"><span
                                        class="glyphicon glyphicon-user"></span></label>
                                <div class="col-xs-10">
                                    <input class="form-control" placeholder="用户名" type="text" name="username"
                                           id="regUsername">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 control-label" for="pwd"><span
                                        class="glyphicon glyphicon-lock"></span></label>
                                <div class="col-xs-10">
                                    <input class="form-control" placeholder="密码" type="password" name="pwd" id="regPwd">
                                    <!-- <span class="help-block">密码中必须包含数字、字母</span> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-2 control-label" for="repwd"><span
                                        class="glyphicon glyphicon-lock"></span></label>
                                <div class="col-xs-10">
                                    <input class="form-control" placeholder="确认密码" type="password" name="repwd"
                                           id="repwd">
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="button" class="btn btn-primary btn-block " value="注册">
                                <input type="button" class="btn  btn-block  " value="重置"> <span class="myInfo"></span>
                            </div>
                            <p>已有账号？ <a href="javascript:;">点击登录</a></p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- 文章 -->
        <div class="col-sm-9 col-sm-pull-3  col-xs-12">
            <div class="mainLeft">
                <div class="mainLeft">
                    <!-- 文章 -->
                    {% for content in contents %}
                    <div class="listBox">
                        <h3>{{content.title}}</h3>
                        <p class="colDefualt">
                            作者：<span class="colInfo">{{content.author}}</span>
                            -时间：<span class="colInfo">{{content.addDat}}</span>
                            -阅读：<span class="colInfo">{{content.views}}</span>
                            -评论：<span id="commentC" class="colInfo">{{content.comments.length || '没有评论'}}</span>
                        </p>
                        <p class="content">{{content.description}}</p>
                        <a href="/view?contentid={{content.id}}"><button class="btn btn-primary ">阅读全文</button></a>
                    </div>
                    {% endfor %}
                    <!-- 分页 -->
                    <div id="mypager">
                        <ul class="pager">
                            {% if page <= 1 %}
                            <li class=" previous disabled"><a href="?/page={{page-1}}"><i class="material-icons">没有上一页了</i></a></li>
                            {% else %}
                            <li class=" previous"><a href="?page={{page-1}}"><i class="material-icons">上一页</i></a></li>
                            {% endif %}
                            <li><strong>{{page}} / {{pages}}</strong></li>
                            {% if page >= pages%}
                            <li class=" next disabled"><a href="javascript:;"><i class="material-icons">没有下一页了</i></a></li>
                            {% else %}
                            <li class=" next"><a href="?page={{page+1}}"><i class="material-icons">下一页</i></a></li>
                            {% endif %}
                        </ul>
                    </div>
                    <!--<div class="listBox message">-->
                        <!--<h4 class="textLeft"><strong>评论</strong> <span class="fr">一共有 <em id='messageCount'>0</em>条评论</span>-->
                        <!--</h4>-->
                        <!--{% if userInfo._id %}-->
                        <!--<p class="textLeft clear">-->
                            <!--<input type="hidden" name="contentid" id="contentId" value="{{content.id}}">-->
                            <!--<textarea id="commitTextarea" class="commit_textarea" placeholder="请填写你的评论~" rows="20" cols="20"-->
                                      <!--wrap="hard"></textarea>-->
                            <!--<button id="messageBtn" class="submit commit_submit">提交</button>-->
                        <!--</p>-->
                        <!--{% else %}-->
                        <!--<p class="bgDanger danger">您还没有登录，请先登录！</p>-->
                        <!--{% endif %}-->
                        <!--<div id="noComments"></div>-->
                        <!--<div id="messageList" id="commitList" style="display: block;">-->
                            <!--&lt;!&ndash;<div class="messageBox">&ndash;&gt;-->
                                <!--&lt;!&ndash;<p class="name clear">&ndash;&gt;-->
                                    <!--&lt;!&ndash;<span class="fl"></span>&ndash;&gt;-->
                                    <!--&lt;!&ndash;<span class="fr"></span>&ndash;&gt;-->
                                <!--&lt;!&ndash;</p>&ndash;&gt;-->
                                <!--&lt;!&ndash;<p></p>&ndash;&gt;-->
                            <!--&lt;!&ndash;</div>&ndash;&gt;-->
                        <!--</div>-->
                        <!--<ul id="pager" class="pager">-->
                            <!--<li class="waves-effect previous"><a href="javascript:;"><i class="material-icons">上一页</i></a>-->
                            <!--</li>-->
                            <!--<li class="active middle"><a href="javascript:;"></a></li>-->
                            <!--<li class="waves-effect next"><a href="javascript:;"><i class="material-icons">下一页</i></a></li>-->
                        <!--</ul>-->
                    <!--</div>-->
                </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- 主体内容结束 -->
<!-- 页脚 -->
<!--<footer>-->
<!--<div>Copyright ©1997-2500 TQZ Personal, All Rights Reserved</div>-->
<!--</footer>-->
<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/index.js"></script>
<script src="/public/js/bootstrap.min.js"></script>
<script src="/public/js/comment.js"></script>
<script type="text/javascript">
    $(function () {
        //解决移动端代码块显示换行后行号显示不正确问题
        SyntaxHighlighter.highlight();
        $("table.syntaxhighlighter").each(function () {
            if (!$(this).hasClass("nogutter")) {
                var $gutter = $($(this).find(".gutter")[0]);
                var $codeLines = $($(this).find(".code .line"));
                $gutter.find(".line").each(function (i) {
                    $(this).height($($codeLines[i]).height());
                    $($codeLines[i]).height($($codeLines[i]).height());
                });
            }
        });
    });
    SyntaxHighlighter.all();
</script>
</body>
</html>